<template>
    <div>
        <path-tracking :path="path"/>  
        <div class="formLayout">
            <el-row class="rows basic">
                <el-col :sm="12" :md="8" :lg="6">
                    <div class="items">
                        <label class="label" for="">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            客户分类
                        </label>
                        <el-select size="small" class="input-cont" placeholder="请选择内容" v-model="customerClassify">
                            <el-option label="请选择客户分类" value=""></el-option>
                            <el-option label="已成交客户" :value="1"></el-option>
                            <el-option label="未成交客户" :value="0"></el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6">
                    <div class="items">
                        <label class="label" for="">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            沟通时间
                        </label>
                        <el-select size="small" class="input-cont" placeholder="请选择内容" v-model="callbackDate">
                            <el-option label="请选择沟通时间" value=""></el-option>
                            <el-option label="3小时内" :value="1"></el-option>
                            <el-option label="3天/3周内" :value="2"></el-option>
                            <el-option label="3周/3月内" :value="3"></el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6">
                    <div class="items">
                        <label class="label" for="">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            沟通事由
                        </label>
                        <el-select size="small" class="input-cont" placeholder="请选择内容" v-model="callbackPurpose">
                            <el-option v-for="(item,index) in options" :key="index" :label="item" :value="item"></el-option>
                            <!-- <el-option label="请选择沟通事由" value=""></el-option>
                            <el-option label="客户关怀" value="客户关怀"></el-option>
                            <el-option label="客户投诉" value="客户投诉"></el-option> -->
                        </el-select>
                    </div>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6">
                    <div class="items">
                        <label class="label" for="">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            沟通方式
                        </label>
                        <el-select size="small" class="input-cont" placeholder="请选择内容" v-model="callbackWay">
                            <el-option label="电话" :value="1"></el-option>
                            <el-option label="微信" :value="2"></el-option>
                            <el-option label="短信" :value="3"></el-option>
                        </el-select>
                    </div>
                </el-col>
            </el-row>
            <el-row class="rows basic" style="margin-top: 1rem;">
                <el-col>
                    <div class="items">
                        <label class="label" for="">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            话术内容
                        </label>
                        <el-input type='textarea' rows="10" class="textArea" v-model="content" />
                    </div>
                </el-col>
            </el-row>
            <div class="formBtnList">
                <button class="sureBtn" @click="toSure">确定</button>
                <button class="cancelBtn" @click="toCancel">取消</button>
            </div>
        </div>
    </div>
</template>

<script>
import pathTracking from '@/components/common/pathTracking'
export default {
    name:'editTalking',
    components:{
        pathTracking
    },
    data(){
        return{
            path: ['CRM', '营销宝典', {label: '回访话术', name: 'returnInterview'}, '编辑'],
            options:['新注册客户售前回访','二次复购跟进回访','售后客户关怀回访','售后提醒通知回访','活动提醒通知回访','售中提醒通知回访','粉钻预约回访','其他临时回访','客户投诉'],
            customerClassify:'',
            callbackDate:'',
            callbackPurpose:'',
            callbackWay:'',
            content:'',
            id:''
        }
    },
    methods:{
        getEditInfo(id){
            var that = this;
            that.$ajax({
				url:api.crm + '/speechcraftInfo/'+id,
				method:'GET',
			}).then((res) => {
                var data = res.data;
                if(data.status == 200){
                    var editInfo = data.result;
                    that.callbackPurpose = editInfo.callbackPurpose;
                    that.content = editInfo.content

                    if(editInfo.callbackWay == 1){
                        that.callbackWay = 1
                    }else if(editInfo.callbackWay == 2){
                        that.callbackWay = 2
                    }else{
                        that.callbackWay = 3
                    }
                    
                    if(editInfo.customerClassify == 1){
                        that.customerClassify = 1
                    }else if(editInfo.customerClassify == 0){
                        that.customerClassify = 0
                    }
                    
                    if(editInfo.callbackDate == 1){
                        that.callbackDate = 1
                    }else if(editInfo.callbackDate == 2){
                        that.callbackDate = 2
                    }else{
                        that.callbackDate = 3
                    }
                }else{

                }
            }).catch((err) => {
                that.$message({
                    message: err.data.msg,
                    type: 'warning'
                });
            })
        },
        toCancel(){
            this.$router.replace({name:'returnInterview'})
        },
        toSure(){
            var that = this;
            var obj ={
                customerClassify:this.customerClassify,
                callbackDate:this.callbackDate,
                callbackPurpose:this.callbackPurpose,
                callbackWay:this.callbackWay,
                content:this.content,
                id:this.id
            }
            
            // if(that.callbackWay == '电话'){
            //     obj.callbackWay = 1
            // }else if(that.callbackWay == '微信'){
            //     obj.callbackWay = '2'
            // }else{
            //     obj.callbackWay = '3'
            // }
            // if(that.customerClassify == '已成交客户'){
            //     obj.customerClassify = 1
            // }else{
            //     obj.customerClassify = 2
            // }
            
            // if(that.callbackDate == '3小时内'){
            //     obj.callbackDate = 1
            // }else if(that.callbackDate == '3天/3周内'){
            //     obj.callbackDate = 2
            // }else{
            //     obj.callbackDate = 3
            // }
            that.$ajax({
				url:api.crm + '/speechcraftInfo',
				method:'PUT',
				data:obj
			}).then((res) => {
                var data = res.data;
                if(data.status == 200){
                    that.$message({
                        message: '编辑话术成功',
                        type: 'success'
                    });
                    setTimeout(function(){
                        //that.clearData();
                        that.toJump()
                    },2000)
                }else{
                    that.$message({
                        message: data.msg,
                        type: 'warning'
                    });
                }
            }).catch((err) => {
                that.$message({
                    message: '编辑话术失败',
                    type: 'warning'
                });
            })
            
        },
        clearData(){
            this.customerClassify ='',
            this.callbackDate='',
            this.callbackPurpose='',
            this.callbackWay = '',
            this.content=''
        },
        toJump(){
            this.$router.replace({name:'returnInterview'})
        }
    },
    created(){
        this.id = this.$route.query.id;
        this.getEditInfo(this.id)
    },
    watch:{
        $route:{
            handler(newVal,oldVal){
                //console.log('newVal',newVal.query.id)
                this.id = newVal.query.id;
                this.getEditInfo(newVal.query.id)
            }
        }
    }
}
</script>

<style scoped>
@import '../../../customerManagement/components/css/viewCommon.css';
.textArea {
    width: 100%;
    resize: none;
    border-radius: 5px;
    font-size: 14px;
    color: #606266;
    line-height: 1.5;
}
.formLayout {
    margin: 16px;
    background-color: #fff;
    height: 100%;
    overflow: auto;
    padding: 16px;
    border-radius: 8px;
}
</style>
